<template>
  <div class="basic-info-container">
    <el-card title="患者基本信息">
      <el-form :model="data" label-width="120px" :disabled="!editable">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="data.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="data.gender" placeholder="请选择性别">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
                <el-option label="其他" value="other"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="data.birthDate"
                type="date"
                placeholder="选择出生日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input v-model="data.age" type="number" placeholder="请输入年龄"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input v-model="data.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="data.email" type="email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="家庭住址">
              <el-input v-model="data.address" placeholder="请输入家庭住址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="紧急联系人">
              <el-input v-model="data.emergencyContact" placeholder="请输入紧急联系人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="紧急联系电话">
              <el-input v-model="data.emergencyPhone" placeholder="请输入紧急联系电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item v-if="editable">
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue';
import { ElCard, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElRow, ElCol, ElButton } from 'element-plus';

// 定义props
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({})
  },
  editable: {
    type: Boolean,
    default: false
  }
});

// 定义emits
const emit = defineEmits(['save']);

// 本地数据副本，用于编辑
const formData = ref({ ...props.data });

// 监听props.data变化，更新本地副本
watch(() => props.data,
  (newData) => {
    formData.value = { ...newData };
  },
  { deep: true }
);

// 保存数据
const handleSave = () => {
  emit('save', formData.value);
};
</script>

<style scoped>
.basic-info-container {
  padding: 10px;
}
</style>